<template>
  <div class="addProject">
    <div class="addProject-inner">
      <div class="title">
        新建项目
        <i @click="closeFn"></i>
      </div>
      <div class="form">
        <el-form ref="projectForm" :rules="projectRules" :model="projectForm" label-width="111px" class="demo-ruleForm">
          <el-form-item label="项目简称" prop="shortName">
            <el-input placeholder="请输入项目简称" v-model="projectForm.shortName"></el-input>
          </el-form-item>
          <el-form-item label="项目分类" prop="projectTypeId">
            <el-select placeholder="请选择项目分类" v-model="projectForm.projectTypeId">
              <el-option v-for='(item ,index) in projectTypeList' :label="item.name" :value="item.id" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目全称" prop="name">
            <el-input placeholder="请输入项目全称" v-model="projectForm.name"></el-input>
          </el-form-item>
          <el-form-item label="项目地点" prop="address">
            <el-input placeholder="请输入项目地点" v-model="projectForm.address"></el-input>
          </el-form-item>
          <el-form-item label="设定时间" required>
            <el-col style="float: left;width: 176px;">
              <el-form-item prop="startTime">
                <el-date-picker type="date"
                                :picker-options="pickerOptions"
                                v-model="projectForm.startTime" placeholder="开始时间" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col style="float: left;width: 48px;text-align: center" class="line line-time">至</el-col>
            <el-col style="float: left;width: 176px;">
              <el-form-item prop="endTime">
                <el-date-picker type="date" v-model="projectForm.endTime" placeholder="截止时间" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="项目经理" prop="managerId">
            <input v-model="projectForm.managerId" type="hidden"/>
            <span class="add-manager" @click="is_show_selectMember = true"></span>
            <span class="select-manager">{{managerName}}</span>
          </el-form-item>
          <el-form-item label="可见范围" prop="visibility">
            <el-select placeholder="请选择可见范围" v-model="projectForm.visibility">
              <el-option label="参与人" value="1"></el-option>
              <el-option label="全部" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="定期汇报" prop="createManagerWeekReport">
            <input type="hidden" v-model="projectForm.reportCycleType" />
            <el-select placeholder="请选择定期汇报" v-model="projectForm.createManagerWeekReport" @change="reportCycleFn">
              <el-option label="无" :value="false"></el-option>
              <el-option label="自定义" :value="true"></el-option>
            </el-select>
            <p v-if="projectForm.reportCycleType!=0">
              <span v-if="projectForm.reportCycleType==7">每周</span>
              <span v-if="projectForm.reportCycleType==30">每月</span>
              <span v-for="(item,index) in projectForm.days">{{item}},</span>
              <span >
<!--                {{projectForm.reportTime}}-->
                汇报</span>
            </p>
          </el-form-item>
          <el-form-item label="项目简介" prop="content">
            <el-input type="textarea" v-model="projectForm.content" resize="none" placeholder="请输入项目简介"></el-input>
          </el-form-item>
          <el-form-item class="text-right">
            <div class="save-btn" @click="saveFn">保存</div>
            <div class="cancel-btn" @click="closeFn">取消</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <transition name="fade">
      <div class="main-popup"  v-if="is_show_selectMember">
        <select-member @close="closeModal" :title="'选择项目经理'" :select="managerId" @callback="selectMemberCallback" :indexClose="'is_show_selectMember'"/>
      </div>
    </transition>
    <!--    自定义日期-->
    <div>
      <customDate v-if="custom_date_data.is_show" :data="custom_date_data" @callback="selectDateCallback"></customDate>
    </div>
    <!--    自定义日期-->
  </div>
</template>

<script>
  import selectMember from '@/components/base/selectMember'; //基本信息詳情
  import customDate from '@/components/customDate'
  export default {
    name: "AddProject",
    components:{
      selectMember,customDate
    },
    props: {
      data: {
        type: Object,
        default: {
          is_show_addProject: false,//是否显示
        }
      }
    },
    data() {
      return {
        pickerOptions:{
          disabledDate:(time) => {
            return time.getTime() < new Date('2000-12-31');
          }
        },
        is_show_customDate:false,//是否显示自定义日期
        custom_date_data: {
          type: '1',//1每周 2每月 0 无
          is_show: false,//是否显示
        },//自定义日期数据
        managerName:'',//项目经理名称
        managerId:'',//项目经理id
        is_show_selectMember:false,//是否显示人员选择框
        projectForm: {
          reportCycleType:0,
          shortName:'',
          projectTypeId:'',
          name:'',
          address:'',
          startTime:'',
          endTime:'',
          managerId:'',
          visibility:'2',
          createManagerWeekReport:false,
          content:'',
        },
        projectRules:{
          shortName: [
            { required: true, message: '请输入项目简称', trigger: 'blur' },
          ],
          projectTypeId: [
            { required: true, message: '请选择项目分类', trigger: 'change' },
          ],
          startTime: [
            { required: true, message: '请选择开始时间', trigger:['change','blur']},
          ],
          endTime: [
            { required: true, message: '请选择截止时间', trigger:['change','blur'] },
          ],
          managerId:[{ required: true, message: '请选择项目经理', trigger:['change','blur']},]
        },
        projectTypeList:[],//项目分类列表
      }
    },
    created() {
      let userInfo=this.$store.state.userInfo;
      this.projectForm.managerId=userInfo.userId;
      this.projectForm.managerName=userInfo.name;
      this.managerId=userInfo.userId;
      this.managerName=userInfo.name;
      let _this=this;
      //获取项目类型列表
      this.$http.get('/project/projectType/page?pageNum=1&pageSize=100&companyId='+userInfo.companyId).then(function (res){
       if(res.statusCode==200){
         _this.projectTypeList=res.data.list;
       }else {
         _this.$message.error(res.statusMsg);
       }
      });
    },
    methods: {
      selectDateCallback(data){
        if (data.type == '1') {
          this.projectForm.reportCycleType = 7;//每周
          this.projectForm.ignoreHoliday = data.ignoreHoliday;//是否跳过节假日
          this.projectForm.reportTime = data.reportTime.Format('hh:mm');//汇报时间 data.reportTime.Format('hh:mm')
          this.projectForm.days = data.days;//汇报时间，数组，若reportCycle为0时可以不传该字段
          this.custom_date_data.is_show = false;//关闭日期控件
        } else {
          this.projectForm.reportCycleType = 30;//每月
          this.projectForm.ignoreWeekend = data.ignoreWeekend;//是否跳过周末
          this.projectForm.ignoreHoliday = data.ignoreHoliday;//是否跳过假日
          this.projectForm.reportTime = data.reportTime.Format('hh:mm');//汇报时间
          this.projectForm.days = data.days;//汇报时间，数组，若reportCycle为0时可以不传该字段
          this.custom_date_data.is_show = false;//关闭日期控件
        }
      },
      //选择自定义日期
      reportCycleFn() {
        if (this.projectForm.createManagerWeekReport == false) {
          //汇报类型为无 0
          this.projectForm.reportCycleType=0;
          this.projectForm.reportTime='';
        } else if (this.projectForm.createManagerWeekReport == true) {
          //汇报类型自定义 每周或者每月 打开自定义日期控件
          this.custom_date_data.is_show = true;
          //一下为日期控件的初始值，编辑任务是重后台获取
          this.custom_date_data.type = '1';//1每周，2每月
          this.custom_date_data.double_cease_month = false;//是否跳过双休，
          this.custom_date_data.holiday = false;//跳过假日
          this.custom_date_data.checkedWeeks = [];//重置周的天数
          this.custom_date_data.day = [];//汇报的天数 ['17', '20', '周三']
          this.custom_date_data.time =new Date(2016, 9, 10, 18,0);//汇报时间
        }
      },
      //关闭人员弹框
      closeModal(res){
        this[res] = false;
      },
      //选择人员
      selectMemberCallback(res,indexClose,obj){
        this.managerId = obj.userId;
        this.managerName = obj.name;
        this.projectForm.managerId=obj.userId;
        this.closeModal(indexClose);
      },
      //关闭
      closeFn() {
        let _this=this;
       this.$confirm('是否放弃新建项目?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         _this.data.is_show_addProject = false;
        }).catch(() => {

        });
      },
      //保存
      saveFn(){
        this.$refs['projectForm'].validate((valid) => {
          if(valid){
            let params=this.projectForm;
            let _this=this;
            params.companyId=this.$store.state.userInfo.companyId;
            params.userId=this.$store.state.userInfo.userId;
            params.managerId=this.managerId;
            // params.createManagerWeekReport=true;//是否创建项目经理一周总结，true 创建 false 不创建
            this.$http.post('/project/project/add',params).then(function (res) {
              if(res.statusCode==200){
                _this.$message({
                  type:'success',
                  offset:'120',
                  message:'创建成功'
                });
                // _this.$message.success('创建成功');
                _this.data.is_show_addProject = false;
                _this.$emit('update');
                setTimeout(function () {
                  _this.$router.push({
                    path: '/project/info',
                    query: {projectId: res.data.id,time:new Date().getTime()}
                  });
                  },1000);

                // _this.$router.push({path: '/project/bulletinBoard',query:{
                //     projectId:'all',attention:'',type:1
                //   }});
                // setTimeout(function () {
                //   window.location.reload();
                // },1000);
              }else {
                _this.$message.error(res.statusMsg);
              }
            });
          }else {
            return false
          }
        })

      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .addProject {
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;

    .addProject-inner {
      position: absolute;
      background-color: #FFFFFF;
      border-radius: 6px;
      width: 608px;
      /*height: 656px;*/
      height: fit-content;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      padding: 32px 32px 0 32px;

      > .title {
        line-height: 1.1;
        font-size: 16px;
        color: #454a55;
        position: relative;
        height: 48px;
        font-weight: 600;

        > i {
          background-size: 16px 17px;
          background-position: center;
          background-repeat: no-repeat;
          position: absolute;
          width: 16px;
          height: 17px;
          background-image: url("../../assets/img/close_icon.png");
          top: 0px;
          right: 0px;
          cursor: pointer;
        }
      }

      .form {
        .el-form-item__label {
          padding-right: 16px;
        }

        .cancel-btn, .save-btn {
          display: inline-block;
          border-radius: 6px;
          width: 88px;
          line-height: 32px;
          text-align: center;
          cursor: pointer;
        }

        .save-btn {
          background-color: #0755db;
          color: #FFFFFF;
        }

        .cancel-btn {
          color: #b3c0c9;
        }

        .add-manager {
          position: absolute;
          width: 38px;
          height: 38px;
          background-image: url("../../assets/img/project/add_manager_icon1.png");
          background-size: 38px 38px;
          background-repeat: no-repeat;
          background-position: center;
          cursor: pointer;
        }
        .select-manager{
          padding-left: 50px;
        }
        .add-manager:hover{
          background-image: url("../../assets/img/project/add_manager_icon2.png");
        }
      }
    }
  }
</style>
<style lang="scss" type="text/scss">
  .form {
    .el-form-item__label {
      padding-right: 16px;
    }

    .el-input__inner, .el-textarea__inner {
      width: 400px;
      background-color: #f2f6f9;
      border-color: #f2f6f9;
    }

    .el-date-editor--date, .el-date-editor--time {
      .el-input__inner {
        width: 176px;
      }
    }

    .el-input__inner:focus, .el-textarea__inner:focus {
      background-color: #FFFFFF;
      border-color: #0755db;
    }

    .line-time {
      width: 20px;
    }
  }
</style>
